<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/axios.min.js"></script>
<script src="js/query.js"></script>
<script>
    window.onload = function () {
        find(1);
    }

    function g() {
        $n("addDiv").style.visibility = "visible";
    }

    function g_2() {
        $n("addDiv").style.visibility = "hidden";
    }

    function find(num) {
        axios.get("user/findByItem", {
            params: {
                pageNO: num,
                name: $n("name").value,
                startDate: $n("startDate").value,
                endDate: $n("endDate").value
            }
        }).then(resp => {
            var info = resp.data;
            var str = "";
            info.list.forEach(n => {
                str += `<tr><td>${n.id}</td><td>${n.name}</td><td>${n.sex}</td><td>${n.birthday}</td><td>${n.money}</td>`;
                $n("data").innerHTML = str;
                var custr = "";
                for (var i = 1; i <= info.totalPage; i++) {
                    custr += `<a href="javascript:find(${i})" style="color:blue;margin-left: 10px">${i}</a>`;
                }
                $n("count").innerHTML = custr;
            });
        });
    }

    function add() {
        axios.get("user/add", {
            params: {
                name: $n("nam").value,
                sex: $n("sex").value,
                money: $n("mon").value,
                birthday: $n("bir").value
            }
        }).then(resp => {
            var info = resp.data;
            if (info == "OK") {
                alert("添加成功");
                find(1);
                g_2();
            } else {
                info.forEach(n => {
                    // alert(info);
                    console.log(info);
                    $n(n.field + "span").innerHTML = n.defaultMessage;
                })
            }
        });
    }


</script>
<style>
    .error {
        color: red;
    }
</style>
<body>
<div>
    <div style="margin-left: 200px;margin-top: 100px;background-color: white;width: 500px;height: 300px;text-align: center">
        <table style="width: 500px;border: 2px solid black">
            <tr style="border: 5px solid black">
                <th>id</th>
                <th>用户名</th>
                <th>性别</th>
                <th>生日</th>
                <th>存款</th>
            </tr>
            <tr style="height: 30px ;width: auto"></tr>
            <tbody id="data" style="text-align: center;margin-top: 30px">

            </tbody>
            <tbody id="count" style="text-align: center;margin-top: 30px">

            </tbody>
        </table>
        <div id="findDiv" style="width: 400px;height: 400px;border: 2px solid black;margin-top: 50px">
            <h1>查询用户</h1>
            用户名：<input type="text" id="name" value=""><br>
            起始日期：<input type="date" id="startDate" value=""><br>
            结束日期：<input type="date" id="endDate" value=""><br>
            <input type="button" onclick="find(1)" value="搜索">
        </div>
        <div>
            <input type="button" onclick="g()" value="添加用户">
        </div>

        <div style="background-color:black;width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
            " id="addDiv">
            <div style=" border: 3px solid #000;
            width: 400px;
            height: 300px;
            padding: 50px;
           width: 400px;
            height: 300px;
            padding: 50px;
            background-color: white;">
                姓名：<input type="text" id="nam"><span id="namespan" class="error"></span><br>
                性别：<select id="sex"><span id="sexspan" class="error"></span>
                <option>男</option>
                <option>女</option>
            </select><br>
                生日：<input type="date" id="bir"><span id="birthdayspan" class="error"></span><br>
                存款：<input type="text" id="mon"><span id="moneyspan" class="error"></span><br>
                <input type="button" value="添加" onclick="add()">
                <input type="button" value="返回" onclick="g_2()">
            </div>
        </div>
    </div>
</div>
</body>
</html>